<template>
    <div class="default">
      <div class="avue-sidebar">

        <!-- <div 
          v-if="!keyCollapse"
          @click="toHomeHandle" 
          class="index-bar">
          <el-image class="index-bar-image"
            :src="require('../../../../public/img/sidebar/home.png')">
          </el-image>
          <span class="marginleft">首页</span>
        </div> -->
          <div v-if="validatenull(menu)"
              class="avue-sidebar--tip">{{$t('menuTip')}}</div>
          <el-menu unique-opened
                  :default-active="nowTagValue"
                  mode="vertical"
                  :show-timeout="200"
                  :collapse="keyCollapse">
            <sidebar-item :menu="menu"
                          :screen="screen"
                          first
                          :props="website.menu.props"
                          :collapse="keyCollapse"></sidebar-item>
          </el-menu>
      </div>
    </div>
</template>

<script>
import { mapGetters } from "vuex";

import sidebarItem from "./sidebarItem";
import {
  isURL,
  validatenull
} from "@/util/validate";
import webiste from "@/config/website";
function addPath(ele, first) {
  const menu = webiste.menu;
  const propsConfig = menu.props;

  const propsDefault = {
    label: propsConfig.label || "label",
    path: propsConfig.path || "path",
    icon: propsConfig.icon || "icon",
    children: propsConfig.children || "children",
    target: propsConfig.target || "target",
  };
  const icon = ele[propsDefault.icon];
  ele[propsDefault.icon] = validatenull(icon) ? menu.iconDefault : icon;
  const isChild = ele[propsDefault.children] && ele[propsDefault.children].length !== 0;

  if (isURL(ele[propsDefault.path])) {
    
    ele[propsDefault.path] = ele[propsDefault.path].replace(/&/g, "$");
  }
  if (!isChild && first && !isURL(ele[propsDefault.path])) {
    ele[propsDefault.path] = ele[propsDefault.path] + "/index";
  } else {
    ele[propsDefault.children] &&
      ele[propsDefault.children].forEach((child) => {
        if (!isURL(child[propsDefault.path])) {
          child[propsDefault.path] = `${ele[propsDefault.path]}${
            child[propsDefault.path] ? child[propsDefault.path] : "index"
          }`;
        }
        addPath(child);
      });
  }
}
export default {
  name: "sidebar",
  components: { sidebarItem},
  inject: ["index"],
  data () {
    return {
      //isShowSubSystem: false
    };
  },
  created () {
    this.index.openMenu(this.sysCategory)
  },
  computed: {
    ...mapGetters(["website", "menu", "tag", "keyCollapse", "screen", "menuId","sysCategory", "allSystem", "systemId", "tagList"]),
    nowTagValue: function () {
      return this.$router.$avueRouter.getValue(this.$route);
    }
  },
  mounted () {
    setTimeout(()=>{
      let haveMainSystem = this.allSystem.find(item=>{return item.F_Id == '0'});
      if(!haveMainSystem && this.allSystem.length && this.systemId == '0'){
        this.$store.commit('SET_SYSTEMID',this.allSystem[0].F_Id);
        let url = this.allSystem[0].F_IndexUrl;
        this.$store.commit('SET_INDEX_URL',url);
        this.$event.$emit('noMainSystemExec');
      }
    },500);
  },
  methods: {
    toHomeHandle(){
      this.$router.push('/wel')
    }
  }
};
</script>
<style lang="scss" scoped>
  .index-bar{
      width: 100%;
      height: 50px;
      font-size: 14px;
      color: #fff;
      border-radius: 12px;
      display: flex;
      line-height: 50px;
      cursor: pointer;
  }
  .index-bar:hover{
    background: #0063f5;
  }
  .index-bar-image{
    width: 14px;
    height: 14px;
    margin-top: 18px;
    margin-left: 24px;
  }
  .marginleft{
    margin-left: 12px;
  }
  
::v-deep .el-submenu .el-submenu__title:hover{
  background: #0063f5 !important;
  color: #fff!important;
  border-radius: 12px;
}
::v-deep .el-submenu .el-submenu__title:hover i{
  color: #fff!important;
}
::v-deep .el-menu-item:hover{
  background: #0063f5 !important;
  color: #fff!important;
  border-radius: 12px;

}
::v-deep .el-menu-item > span{
  color: #fff!important;
}
::v-deep .el-submenu__title > span{
  color: #fff!important;
}

::v-deep .el-menu-item.is-active {
  background-color:#0063f5!important;
  border-radius: 12px;
}
</style>

